<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 元素遍历   用于DOM树中遍历元素【元素嵌套，父子级】
		 children()			功能：获取匹配元素集合中每个元素的子元素
		 parent()			功能：获取匹配元素集合中每个元素的父元素
		 
		 siblings()			功能：获取匹配元素集合中每个元素的所有兄弟元素
		 
		 next()				功能：获取匹配元素集合中每个元素的下一个兄弟元素
		 prev()				功能：获取匹配元素集合中每个元素的上一个兄弟元素
		 
		 each()				功能：遍历匹配元素的集合---遍历所有的子元素
							语法糖：each(function(index,element){
								$(element).text('${index}')
								注意：打印遍历的值，不可以使用单双引号+拼接
								功能：获取到的元素，遍历元素内容
							})    
										index：下标 形参   element：元素 形参
		 -->
		 <style>
			.container{
				border: 1px solid #00ffff;
				padding: 10px;
				margin: 10px;
			}
			.box{
				background-color: aqua;
				padding: 10px;
				margin: 10px;
			}
			button{
				margin: 5px;
			}
		 </style>
	</head>
	<body>
		<!-- html:    div.container  父级  6个div.box  每个#box1  子级
						6个按钮
			css：    .container添加样式   边框1px ，内外边距	10px
					 .box添加样式		背景色，内外边距10px
					 button添加样式		外边距：5px
					 
		 -->
		 <div class="container">
		 	<div class="box" id="box1">盒子1</div>
		 	<div class="box" id="box2">盒子2</div>
		 	<div class="box" id="box3">盒子3</div>
		 	<div class="box" id="box4">盒子4</div>
		 	<div class="box" id="box5">盒子5</div>
		 	<div class="box" id="box6">盒子6</div>
		 </div>
		 <button id="gc">获取子元素</button>
		 <button id="gp">获取父元素</button>
		 <button id="gs">获取兄弟元素</button>
		 <button id="gn">获取下一个兄弟元素</button>
		 <button id="gr">获取上一个兄弟元素</button>
		 <button id="loop">遍历元素</button>
		 <script>
			 /* 1.点击 获取子元素 按钮  实现：.container下所有子元素添加背景色*/
			 $("#gc").click(function(){
				 //通过 父找子 函数 --添加效果
				 $(".container").children().css("background-color","#ff5500");
				 
			 });
			 /* 2.点击 获取父元素 按钮  实现.container 添加背景色*/
			 $("#gp").click(function(){
				 $("#box1").parent().css("background-color","red");
			 });
			 /* 3.点击  获取兄弟元素 按钮   实现除了#box4  字体颜色不变其他变色*/
			 $("#gs").click(function(){
				 $("#box4").siblings().css("color","#ffff00");
			 });
			 /* 4.点击  获取下一个兄弟元素  按钮  实现#box4  下一个兄弟，添加背景色*/
			 $("#gn").click(function(){
				 $("#box4").next().css("background-color","#55aaff")
			 });
			 /* 5.点击  获取上一个兄弟元素  按钮  实现#box6 上一个兄弟，添加效果
																	圆  背景图  背景色  盒子阴影*/
			$("#gr").click(function(){
				$("#box6").prev().css({ "width":"100px","height":"100px","color":"transparent",
										"border-radius":"50%",
										"background-image":"url(../img/1.gif)",
										"background-color":"yellow",
										"box-shadow":"5px 5px 10px #ff0",
										"background-size":"100% 100%"});
			});
			/* 6.点击  遍历元素  按钮  实现每个盒子上， */
			$("#loop").click(function(){
				//通过  .box  抓到6个元素【一组集合】
				$(".box").each(function(i,e){//e代表元素  i代表下标
					//每个盒子加文字：这事第几个盒子
					$(e).text(`这是第${i+1}盒子`);
				});
			});
			
		 </script>
	</body>
</html>